<template>
	<view class="page" v-if="Object.keys(info).length > 0">
		<navHead :datas="headData"></navHead>
		<view class="content_box ">
			<view class="flex-c-center">
				<image src="https://cdn.oss.bon-top.cn/static_bc/images/fail.png" style="width: 76rpx;height: 76rpx;"
					mode="widthFix" v-if="info.cash_info.examine_status==2"></image>
				<image src="https://cdn.oss.bon-top.cn/static_bc/images/success.png" style="width: 76rpx;height: 76rpx;"
					mode="widthFix" v-else></image>
				<view class="ft ft-28 fw-800 mt-20">{{info.cash_info.examine_status_txt}}!</view>
				<view class="flex mt-20">
					<view class="ft-28 c-33 fw-800">￥</view>
					<view class="ft-num price">{{info.reduce}}</view>
				</view>
			</view>
			<view class="mt-60 m pd-20">
				<view class="flex-bwt">
					<view class="ft c-99">提现到</view>
					<view class="ft">{{info.cash_info.user_bank_type}} | 尾号 {{info.cash_info.user_bank_num}}</view>
				</view>
				<view class="flex-bwt mt-20">
					<view class="ft c-99">到账时间</view>
					<view class="ft">{{info.cash_info.expect_at}}</view>
				</view>
			</view>
			<view class="mt-20 m pd-20">
				<view class="ft c-99">处理进度</view>
				<view class="mt-20">
					<template v-for="(item,index) in info.cash_info.progress" :key="index">
						<view class="flex">
							<image src="https://cdn.oss.bon-top.cn/static_bc/images/ing.png" class="mr-10"
								style="width:30rpx;height: 30rpx;" v-if="item.is_active==0"></image>
							<image src="https://cdn.oss.bon-top.cn/static_bc/images/success.png" class="mr-10"
								style="width:30rpx;height: 30rpx;" v-else-if="item.is_active==1"></image>
							<image src="https://cdn.oss.bon-top.cn/static_bc/images/fail.png" class="mr-10"
								style="width:30rpx;height: 30rpx;" v-else-if="item.is_active==2"></image>
							<view class="ft" :class="{'fw-800':item.is_active!=0,'c-99':item.is_active==0}">
								{{item.label}} {{item.txt}}
							</view>
						</view>
						<view
							style="margin-left: 16rpx;margin-top: 4rpx;margin-bottom: 4rpx;width: 2rpx;background: #F1F1F1;height: 36rpx;"
							v-if="index < info.cash_info.progress.length-1"></view>
					</template>
				</view>
				<view class="mt-20 pd-20 remark" v-if="info.cash_info.reason">备注：{{info.cash_info.reason}}</view>
			</view>
			<view class="flex-center mt-60" v-if="info.is_show_btn==1">
				<view class="btn1 mr-30 flex-center" @click="goOrderPay(info.order_id)">去使用</view>
				<view class="btn2 flex-center" @click="goCash">重新提现</view>
			</view>
			<view style="height: 230rpx;"></view>
			<view class="bottomBtn">
				<view class="btnA flex-center" @click="">
					<image src="https://cdn.oss.bon-top.cn/static_bc/images/info.png"
						style="width:28rpx;height: 28rpx;margin-right: 4rpx;"></image>
					<view>联系客服</view>
				</view>
				<view class="btnB flex-center" @click="back">返回优惠券</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="js">
	import {
		ref,
		reactive
	} from "vue";
	import {
		utils
	} from '@/utils/utils.js';
	import {
		api
	} from '@/utils/api.js';
	import {
		onLaunch,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";

	import navHead from '@/components/navHead.vue';
	const headData = reactive({
		color: '#fff',
		title: '提现详情'
	})

	const info = ref({})
	const id = ref('')
	onLoad((options) => {
		id.value = options.id
		utils
			.request(
				api.cashDetail, {
					id: options.id
				},
				"post"
			)
			.then((res) => {
				info.value = res.data.info
			});
	})

	const goCash = () => {
		uni.navigateTo({
			url: `/subpackage/userCoupon/cash?id=${id.value}`,
		});
	}

	const goOrderPay = (orderId) => {
		//跳转到订单支付列表
		console.log(orderId, '11111111111111')
	}

	const back = () => {
		uni.reLaunch({
			url: '/subpackage/userCoupon/index'
		})
	}
</script>

<style lang="scss" scoped>
	.content_box {
		background: #FFFFFF;
		padding: 60rpx 30rpx;
		box-sizing: border-box;

		.m {
			background: #F8F8F8;
			border-radius: 40rpx;
		}

		.remark {
			width: 650rpx;
			background: #F1F1F1;
			font-size: 22rpx;
			color: #999999;
			border-radius: 20rpx;
		}

		.btn1 {
			width: 210rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.btn2 {
			width: 210rpx;
			height: 78rpx;
			background: #DBF046;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.bottomBtn {
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			background: #F8F8F8;
			width: 100%;
			padding-bottom: calc(0rpx + env(safe-area-inset-bottom));

			.btnA {
				width: 750rpx;
				height: 74rpx;
				background: #F8F8F8;
				font-weight: 800;
				font-size: 24rpx;
				color: #333333;
			}

			.btnB {
				width: 690rpx;
				height: 78rpx;
				background: #333333;
				border-radius: 20rpx;
				margin: 10rpx auto;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>